:root {
  --container-bg: #fff;
  --container-shadow: #e2e5ed;
}

.container {
  width: 100%;
  min-height: calc(100vh - 132px);
  padding: 16px;
  border-radius: 8px;
  background-color: var(--container-bg);
  box-shadow: 0px 0px 6px 3px var(--container-shadow);
}

.text-ellipsis {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.box-shadow {
  transition: all 0.3s linear;
  &:hover {
    cursor: pointer;
    box-shadow: 2px 2px 10px 0 rgba(0, 0, 0,0.2);
  }
}

.hide_scroll_bar {
  -ms-scroll-chaining: chained;
  -ms-overflow-style: none;
  -ms-content-zooming: zoom;
  -ms-scroll-rails: none;
  -ms-content-zoom-limit-min: 100%;
  -ms-content-zoom-limit-max: 500%;
  -ms-scroll-snap-type: proximity;
  -ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%);
  -ms-overflow-style: none;
  overflow: auto;
  &::-webkit-scrollbar {
    display: none;
  }
}

.beautify_scroll_bar {
  & ::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 8px;
    height: 8px;
  }
  & ::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 0;
  }
  & ::-webkit-scrollbar-thumb {
    cursor: pointer;
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.15);
    transition: color 0.2s ease;
  }
  & ::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
  }
}

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

.common-card-header {
  margin-top: 14px;
  position: relative;
  text-indent: 18px;
  color: #141e31;
  font-size: 17px;
  font-weight: bold;
  &::before {
    content: '';
    width: 6px;
    height: 21px;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background-color: #2461ff;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
  }
}